<template>
	<view class="content">
		<h1>待办事项管理</h1>
		
		//添加
		<view class="">
			<input 
			type="text"
			v-model="newTitle"
			placeholder="请输入待办事项"
			@confirm="addTodos"
			 />
			 <button @click="addTodos">添加</button>
		</view>
		
		<view class="">
			<view v-for="(item,index) in todos" :key="index">
				<view v-if="editingId !== item.id">
					<checkbox
					 :checked="item.comleted"
					 @change="toggleComplete(item)"
					 ></checkbox>
					 <text>
						 <button @click="startEdit(item)">编辑</button>
						 <button @click="deleteTodo(item.id)">删除</button>
					 </text>
				</view>
				<view v-else>
					<input type="text"
					 v-model="editTitle"
					 @confirm="saveEdit(item.id)"/>
					 <view >
					 	<button @click="saveEdit(item.id)" >保存</button>
					 	<button @click="cancelEdit" >取消</button>
					 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newTitle: '',
				todos:[],
				editingId : null,
				editTitle : "",
			}
		},
		methods: {
			addTodos(){
				const id = new Date().getTime();
				this.todos.push({
					id: id,
					title:this.newTitle
				})
				uni.showToast({
					title: '添加成功',
					icon: 'success'
				});
			},
			delFn(id){
				 this.todoList = this.todoList.filter(todo => todo.id !== id);
			},
			editFn(id){
				
			}
		}
	}
</script>

<style>
	
</style>
